<template>
	<view class="confirmOrder">
		<NavBar title="确认订单">
		</NavBar>
		<view class="top_img">
			<image src="/static/img/index/107.png" mode="widthFix"></image>
		</view>
		<view class="top" @tap="navTo('/pages/shippingAddress/index?isAddress=1')">
			<view class="">
				<image src="/static/img/index/106.png" mode="widthFix"></image>
				{{!data.address?'请选择':data.address.rcvName}} {{!data.address?'':data.address.rcvPhone}}
			</view>
			<text v-if="data.address">{{data.address.address}}</text>
		</view>
		<scroll-view scroll-y="true">
			<view class="confirmOrderItem" v-for="(item,index) in data.list" :key="index">
				{{item.name}}
				<view class="" v-for="(item1,index1) in item.list" :key="index1">
					<view class="top">
						<view class="left">
							<text>{{item1.sellType.name}}</text>
							<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item1.fileId" mode="aspectFill">
							</image>
						</view>
						<view class="right">
							<text class="ellipsis_2">{{item1.productName}}</text>
							<text>{{item1.specName}}：{{item1.specValue}}</text>
							<view class="attr">
								<text class="attr" v-for="(item2,index2) in item1.attrsList || item1.attrs"
									:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
							</view>
							<view class="priceText">
								<text>{{(item1.price+'').split('.')[0]}}</text>
								<text>.{{(item1.price+'').split('.')[1]}}</text>
							</view>
						</view>
					</view>
					<view class="bot">
						<image @tap="handeClick(item1,0)"
							:src="item1.num == 1?'/static/img/index/jian1.png':'/static/img/index/jian.png'"
							mode="widthFix"></image>
						<input type="number" v-model="item1.num" />
						<image @tap="handeClick(item1,1)" src="/static/img/index/jia.png" mode="widthFix"></image>
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="coupon" @tap="handeClick2">
			优惠券
			<view class="">
				{{data.couponCode && data.listCoupons.filter(item=>item.bool).length && '- '+data.listCoupons.filter(item=>item.bool)[0].couponAmount}}
				<image  src="/static/img/index/20.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="confirmOrderBottom_1">
			<view v-for="(item,index) in paymentChannels" :key="index" class="" @tap="data.payChannel = item.value">
				<view class="left">
					<image :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix"></image>
					{{item.name}}
				</view>
				<image :src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
					mode="widthFix">
				</image>
			</view>
		</view>
		<view class="confirmOrderBottom">
			<view class="left">
				实付合计:
				<text>¥{{subtract(data.list.map(item=>item.list.map(item=>(item.price*1) * (item.num*1))).map(item=>item.reduce((a,b)=>a+b,0)).reduce((a,b)=>a+b,0).toFixed(2),data.couponCode?data.listCoupons.filter(item=>item.bool)[0].couponAmount:0)}}</text>
			</view>
			<view class="right" @tap="submit">
				立即支付
			</view>
		</view>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
		<u-popup round="20" mode="bottom" :show="data.show" @close="()=>{data.show = false}">
			<view class="couponPopup" >
				<view class="couponPopupTop">
					<view class="">
		
					</view>
					优惠券
					<image @tap="data.show = false" src="/static/img/index/199.png" mode="widthFix"></image>
				</view>
				<scroll-view scroll-y="true">
					<view class="list">
						<view @tap="handeClick3(item)" class="listItem" v-for="(item,index) in data.listCoupons" :key="index">
							<image :src="item.bool?'/static/img/freeShipping/16.png':'/static/img/freeShipping/17.png'" mode="widthFix"></image>
							<view class="bot">
								<view class="left">
									<text>免单购券</text>
									<view class="left_1">
										<text class="amount">{{item.couponAmount}}</text>
										{{item.couponName}}
									</view>
									<view class="right_1">
										<text>累计免单金额</text>
										{{item.createTime}}-{{item.invalidTime}}
									</view>
								</view>
								<view class="right">
									<text>无门槛</text>
									<text>全平台通用</text>
									<!-- <text>立即使用</text> -->
								</view>
							</view>
		
						</view>
					</view>
				</scroll-view>
				<view class="bot">
					<text @tap="handeClick1">确定</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import NavBar from '@/components/navBar.vue'
	import { queryUserAddressList } from '@/utils/api/address'
	import { submitOrderAndPay } from '@/utils/api/goods'
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import { paymentChannels, payment } from '@/utils/index'
	import {listUserCoupons} from '@/utils/api/freeShipping'
	import {
		reactive
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const data = reactive<any>({
		list: [],
		httpUrl: getApp().globalData.baseUrl,
		index: 0,
		address: '',
		show1: false,
		onConfirm: () => { },
		payChannel: paymentChannels[0].value,
		listCoupons:[]
	})
	uni.$off('confirmOrder');
	uni.$on('confirmOrder', (e) => {
		console.log(e, 'eee')
		data.list = e;
	})
	uni.$once('emitFreeCode', (e) => {
		data.freeCode = e;
	})
	uni.$off('confirmOrderAddress');
	uni.$on('confirmOrderAddress', (e) => {
		data.address = e;
	})
	const handeClick1 = ()=>{
		const item = data.listCoupons.find(item=>item.bool);
		if(item){
			data.couponCode = item.couponCode;
		}else{
			data.couponCode = '';
		}
		data.show = false;
	}
	const handeClick2 = ()=>{
		data.listCoupons.map((item)=>{
			item.bool = false;
			if(item.couponCode == data.couponCode){
				item.bool = true
			}
		})
		data.show = true;
	}
	const subtract = (num1, num2)=>{
	  const multiplier = Math.pow(10, Math.max(decimalLength(num1), decimalLength(num2)));
	  return ((num1 * multiplier - num2 * multiplier) / multiplier)*1<0?0:(num1 * multiplier - num2 * multiplier) / multiplier;
	}
	const decimalLength = (num)=>{
	  return (num.toString().split('.')[1] || '').length;
	}

	const handeClick3 = (item)=>{
		data.listCoupons.map((item1)=>{
			if(item.id == item1.id){
				item.bool = !item.bool
			}else{
				item1.bool = false
			}
		})
	}
	const handeClick = (item, i) => {
		if (i) {
			item.num = item.num * 1 + 1;
		} else {
			if (item.num > 1) {
				item.num = item.num * 1 - 1;
			}
		}
	}
	listUserCoupons().then((res)=>{
		data.listCoupons = res.data;
	})
	const navTo = (url) => {
		uni.navigateTo({
			url
		})
	}
	const submit = () => {
		if (!data.address) {
			uni.showToast({
				title: '请选择收货地址!',
				icon: 'none',
				mask: true
			})
			return;
		}
		const arr = [];
		data.list.map((item) => {
			item.list.map((item1) => {
				arr.push({ skuId: item1.skuId, num: item1.num, attrs: item1.attrsList })
			})
		})
		if (data.payChannel == 'WALLET') {
			data.show1 = true;
			data.onConfirm = (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				submitOrderAndPay({ data: {freeCode:data.freeCode, selectSkus: arr, receiveAddressId: data.address.id, payChannel: data.payChannel, payPwd: e,coupouCode:data.couponCode } }).then((res) => {
					if (res.code == 200) {
						uni.hideLoading()
						payment(data.payChannel, {...res.data,freeCode:data.freeCode}).then((res) => {
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						})
					}
				})
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		submitOrderAndPay({ data: {freeCode:data.freeCode, selectSkus: arr, receiveAddressId: data.address.id, payChannel: data.payChannel } }).then((res) => {
			if (res.code == 200) {
				uni.hideLoading()
				payment(data.payChannel, {...res.data,freeCode:data.freeCode}).then((res) => {
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		})

	}
	onShow(() => {
		if (!data.address) {
			queryUserAddressList({ data: { addressDefaultType: 'DEFAULT' } }).then((res) => {
				data.address = res.data.list[0]
			})
		}
	})
</script>

<style lang="scss">
	.couponPopup {
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0 0;
		.couponPopupTop {
			padding: 24rpx 32rpx 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			
			view {
				width: 32rpx;
			}
	
			image {
				width: 32rpx;
			}
		}
	
		>.bot {
			padding: 12rpx 50rpx 30rpx 50rpx;
			background-color: #fff;
	
			text {
				display: flex;
				width: 100%;
				height: 88rpx;
				align-items: center;
				justify-content: center;
				border-radius: 44rpx;
				color: #fff;
				background-color: #FF263F;
				font-size: 32rpx;
			}
		}
	
		scroll-view {
			height: 800rpx;
			overflow: auto;
			padding: 24rpx 32rpx;
		}
	
		.list {
			>view:nth-of-type(1) {
				margin-top: 0;
			}
		}
	
		.listItem {
			margin-top: 24rpx;
			// display: flex;
			>image{
				width: 	36rpx;
			}
			.bot {
				margin-top: 20rpx;
				display: flex;
				height: 200rpx;
				border-radius: 24rpx;
				overflow: hidden;
				background: #fff;
	
				>.left {
					flex: 1;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
	
					padding: 0 20rpx;
	
					>image {
						width: 180rpx;
						position: absolute;
						right: -30rpx;
						top: -70rpx;
					}
	
					>text {
						padding: 2rpx 12rpx;
						border-radius: 20rpx 0 20rpx 0;
						background: #FFD7AF;
						color: #C97210;
						font-size: 24rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
	
					.left_1 {
						display: flex;
						align-items: center;
	
						.amount {
							color: #FF263F;
							font-size: 64rpx;
							width: 180rpx;
	
							&:before {
								content: '￥';
								font-size: 36rpx;
								font-weight: bold;
								color: #FF263F;
							}
						}
					}
	
					.right_1 {
						display: flex;
						align-items: center;
						color: #8C8C8C;
						font-size: 20rpx;
	
						text {
							color: #8C8C8C;
							font-size: 20rpx;
							width: 180rpx;
						}
					}
				}
	
				>.right {
					background: linear-gradient(251deg, #FF3E61 0%, #FA2D1C 100%);
					box-shadow: -8rpx 0rpx 32rpx 0rpx rgba(255, 57, 43, 0.2);
					width: 246rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
	
					text:nth-of-type(1) {
						font-size: 36rpx;
						color: #fff;
					}
	
					text:nth-of-type(2) {
						color: rgba(255, 255, 255, .8);
						font-size: 22rpx;
						margin: 10rpx 0;
					}
	
					text:nth-of-type(3) {
						padding: 2rpx 16rpx;
						border-radius: 16rpx;
						background: #fff;
						color: #FA2D1C;
						font-size: 24rpx;
					}
				}
			}
	
		}
	}
	.navBarTop {
		background: transparent !important;
	}
	.coupon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 24rpx;
		margin: 0 24rpx;
		border-radius: 24rpx;
		background: #fff;
		margin-top: 20rpx;
		view{
			color: #FF263F;
			display: flex;
			align-items: center;
		}
		image {
			width: 38rpx;
		}
	}
	.confirmOrder {
		height: 100vh;
		background: #F6F7F9;
		display: flex;
		flex-direction: column;

		>.top {
			position: relative;
			z-index: 9;
			padding: 24rpx;
			background: #fff;
			border-radius: 24rpx;
			margin: 41rpx 24rpx 16rpx 24rpx;

			view {
				display: flex;
				align-items: center;
				font-size: 32rpx;

				image {
					width: 48rpx;
					margin-right: 16rpx;
				}
			}

			text {
				margin-top: 16rpx;
				line-height: 1.5;
			}
		}
	}

	.confirmOrderItem {
		margin: 0 24rpx 16rpx 24rpx;
		padding: 24rpx;
		border-radius: 24rpx;
		background: #fff;
		font-size: 32rpx;

		>view {
			margin-top: 24rpx;

			>.top {
				display: flex;
				align-items: center;

				>.left {
					width: 180rpx;
					margin-right: 24rpx;
					height: 180rpx;
					border-radius: 24rpx;
					background: #ccc;
					position: relative;

					text {
						display: inline-block;
						padding: 5rpx 16rpx;
						background: #CD9A67;
						color: #FFF5E2;
						font-size: 20rpx;
						border-radius: 24rpx 0 24rpx 0;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 8;
					}

					image {
						width: 100%;
						height: 100%;
						border-radius: 24rpx 0 24rpx 0;
					}
				}

				>.right {
					flex: 1;
					width: 0;
					display: flex;
					flex-direction: column;

					>text:nth-of-type(1) {
						line-height: 1.5;
					}

					>text:nth-of-type(2) {
						font-size: 24rpx;
						color: #8C8C8C;
						margin: 8rpx 0;
					}

					.attr {

						text {
							font-size: 24rpx;
							color: #8C8C8C;
							display: inline-block;
							margin-right: 10rpx;
						}
					}
				}
			}

			>.bot {
				display: flex;
				justify-content: flex-end;

				image {
					width: 40rpx;
				}

				input {
					width: 60rpx;
					height: 40rpx;
					margin: 0 5rpx;
					background: #F5F5F5;
					border-radius: 8rpx;
					text-align: center;
				}
			}
		}
	}

	.confirmOrderBottom_1 {
		>view {
			justify-content: space-between;
			padding: 37rpx 35rpx;
			border-radius: 24rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin: 24rpx 24rpx 0 24rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					margin-right: 25rpx;
				}

				font-size: 24rpx;
			}

			>image {
				width: 36rpx;
			}
		}
	}

	.confirmOrderBottom {
		background: #fff;
		padding: 35rpx 16rpx 50rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 24rpx;

		.left {
			display: flex;
			align-items: center;

			text {
				font-weight: bold;
			}
		}

		.right {
			width: 240rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: #6B64D3;
		}
	}

	scroll-view {
		flex: 1;
		overflow: auto;

	}

	.top_img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;

		image {
			width: 100%;
		}
	}
</style>